<template>
    <div id="myheart">
        <img @click="$router.push('/')" class="return" src="./images/主页.png"/>
        <navigation></navigation>
        <div class="mysay">
            <p>
                我做了一个有意思的特效，气球飘动，这个效果是通过事件触发动态生成的，#bool的总的框架一开始就有，其中那些
包裹气球样式的div是经过生成得来的。这里我用了Vue，为了避免样式的重复和全局污染，我就经常喜欢用style:scoped
来组件约束，但是这样就出现了一个问题，那些自动生成的div确实生成了，但是长宽都为零!这敢信啊，我后面花了好长的
时间去检查测试样式，明明我已经定义了宽高，且层级高的样式没去进行定义，我在想这到底是是哪里的问题。再后面我又想
是不是其他父级组件的约束，也试了，但也不是。晚上两点钟爬起来，我就改了scoped,我把他取消了，ohohohohoh!竟然可以了。后面我去网上查了这样的一个问题。
            </p>
        </div>
    </div>
</template>

<script>
import Navigation from '@/components/Navigation/Navigation.vue';

export default {
    name: "Myheart",
    components: { Navigation }
}
</script>

<style scoped>
#myheart {
    background: linear-gradient(to right top, #fbc7d4, #9796f0);
    min-height: 100vh;
    min-width: 100vw;
    overflow: hidden;
}

.mysay {
    position: relative;
    left: 50%;
    top: 100px;
    transform: translateX(-50%);
    display: flex;
    padding: 60px;
}
.mysay>p{
    text-indent: 2em;
    line-height: 28px;
    font-size: 20px;
    font-family:'Times New Roman', Times, serif;
    color: mediumslateblue;
    font-style: oblique;
}
img.return {
  position: absolute;
  z-index: 20;
  left: 10px;
  top: 10px;
  transition: .5s;
  cursor: pointer;
  width: 40px;
}

img.return:hover {
  transform: scale(1.5);
}
</style>